<script setup  name="HljlJxpzForm"> 
import { ref, reactive,onMounted } from "vue";
import {selectZhuanMa} from "@/utils/selectZhuanMaUtils";
import { ElNotification } from 'element-plus';
const dataSourceTableConst=ref([]);
const hljbConst=ref({name: 'VxeSelect',options: []});  //护理级别
const hljbConstFun  =async ()=>{
  const res = await window.xinpuWebsApi('GetFixCode', { "bh":  "xp_hljl_lb" });
  hljbConst.value.options=res.ReContent  ;
  
 }//获取护理级别的方法
const getPageRigthDataObj=ref({});
let dataSourceTableListConst = {list:[]}; //临时数据源用来存储插入、修改、删除数据源 

const selectdataSourceTableConstFun=async()=>{
    const res = await window.xinpuHttpApi('100138',{},"dzblhttphosptalserver");
    dataSourceTableConst.value=res.ReContent;
}

//各种元素的对象名称
const tableRef=ref(null);
const biaoshi = (cellValue ) => {
    if(cellValue=='2')
    {
     return   '待改'
    }
    else if(cellValue=='1')
    {
     return  '待增'
    }
    else if(cellValue=='3')
    {
     return  '待删'
    }
    else if(cellValue=='9')
    {
     return  '待删'
    }
    else
    {
     return ''
    }  
}
//2.1保存交易
 const saveFun=async()=>{
  let linshitableData=[];
  for(let i=0;i<dataSourceTableConst.value.length;i++){
    if(dataSourceTableConst.value[i].saveflag!=0){
       //移除这两个属性
      delete dataSourceTableConst.value[i].ReContent;
      delete dataSourceTableConst.value[i]._X_ROW_KEY;
      linshitableData.push(dataSourceTableConst.value[i]);  
    }
  }
  dataSourceTableListConst.list=linshitableData;
  const res = await window.xinpuHttpApi('100141', dataSourceTableListConst,"dzblhttphosptalserver");
  console.log(res);
  if(res !=undefined){
    if(res.Flag==true){
       ElNotification.success({
        title: '成功',
        message: '保存数据成功',
        offset: 100,
      });
      selectdataSourceTableConstFun(); 
    }
  }
  
}
//2.2插入方法
 const insertFun=async ()=>{
//点插入的时候新建一行临时数据，数据里面给定一些默认值，其他让用户选择
  const insertRowObj=ref({
    field: "",
    len: "",
    lb: "" ,
    saveflag: 1 
  });
  const $table = tableRef.value;
  dataSourceTableConst.value.push(insertRowObj.value);
  const { row: newRow } = await $table.insertAt(insertRowObj.value, -1);
  await $table.setEditCell(newRow, 'mc');
  ElNotification.success({
    title: '成功',
    message: '第'+(dataSourceTableConst.value[dataSourceTableConst.value.length-1].bh)+'行创建成功，在表格最下面',
    offset: 100,
  });
}
//2.3删除方法
const deleteFun=()=>{
  const $table = tableRef.value;
  const selectRecords = $table.getCurrentRecord();
  dataSourceTableConst.value[$table.getRowSeq(selectRecords)-1].saveflag=3;
  console.log(dataSourceTableConst.value[$table.getRowSeq(selectRecords)]);
}
const cellClickConst=ref('删除');
let rowObj=ref({});


const cellClick=(row)=>{
  //console.log(row.row.saveflag);
  if(row.row.saveflag==3){
    cellClickConst.value='取消删除';
  }

  getPageRigthDataObj.value=row.row;
  
  console.log(getPageRigthDataObj);
  watch(()=>[getPageRigthDataObj.value ], ([objnew ], [objold ]) => {
    // 右侧子界面的数据是来源于左侧表格点击后的一行对象的数据，要监听是在右侧修改这个行对象带来的改变，不
    // 要点击第一行后又点击第二行的数据带来的改变，所以这里要判断一下，上次的老数据必须和本次的新数据一直
    // 不然就认为你是点击了其他行带来的改变，所以就不做修改标记处理
    if(getPageRigthDataObj.value==objold){
      const $table = tableRef.value;
      //添加行后标记是3，要点到单元格做标记，这个位置和修改方法一致了，所以加个判断只有标记不是新增和删除类型的才做修改标记
      
      if(dataSourceTableConst.value[$table.getRowSeq(getPageRigthDataObj.value)-1]!=undefined){
          if(dataSourceTableConst.value[$table.getRowSeq(getPageRigthDataObj.value)-1].saveflag==0){
          dataSourceTableConst.value[$table.getRowSeq(getPageRigthDataObj.value)-1].saveflag=2;
          console.log('执行了');
        }
      }    
    }
     
     
 }, { deep: true });
}

//2.4修改方法
//定义一个变量记录变化前后的值
let updateConst='';
const updateFun=(row,a)=>{
  const $table = tableRef.value;
  if(a==1){
    updateConst=row.column.model.value;
  }
  else if(a==2){
    if(dataSourceTableConst.value[$table.getRowSeq(getPageRigthDataObj.value)-1].saveflag==0){
      if(updateConst!=row.column.model.value){
        
        dataSourceTableConst.value[$table.getRowSeq(row.row)-1].saveflag=2;
        //  判断成功后，就把updateConst恢复为空
        updateConst='';
      }
    }
  } 
}








onMounted(()=>{
    // selectdataSourceTableConstFun();
    // hljbConstFun();
})
</script> 

<template>
<div class="main-content">
    <div class="main-content-case">
        <div class="button-case">
            <div class="button-case-box" @click="insertFun()">
            <img
              src="../../../assets/images/add_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>新增</div>
            </div>
            <div class="button-case-box" >
                <img
                src="../../../assets/images/del_icon.png"
                style="width: 16px; height: 16px; margin-right: 2px"
                alt=""
                srcset=""
                />
                <el-popconfirm title="确认删除吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="deleteFun()"
                @cancel=""
                >
                <template #reference>
                    <div>删除</div>
                </template>
                </el-popconfirm>   
            </div>
            <div class="button-case-box"  > 
                <img
                    src="../../../assets/images/save_icon.png"
                    style="width: 16px; height: 16px; margin-right: 2px"
                    alt=""
                    srcset=""
                    />
                <el-popconfirm title="确认保存吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="saveFun()"
                @cancel=""
                >
                <template #reference>
                    <div>保存</div>
                </template>
                </el-popconfirm>   
            </div>   
            <div class="button-case-box"  @click="selectdataSourceTableConstFun"> 
                <img
                    src="../../../assets/images/replace_icon.png"
                    style="width: 16px; height: 16px; margin-right: 2px"
                    alt=""
                    srcset=""
                    />
                
                    <div>刷新</div>
                
            </div>   
             
        </div> 
        <div class="table-case">
           <vxe-table
            ref="tableRef"
            border
            :columnConfig="{resizable: true}"
            :row-config="{isCurrent:true,isHover:true}"
            :edit-config="{mode: 'cell', trigger: 'click',showIcon:false}"
            :data="dataSourceTableConst"
            height= 100%
            :scroll-y="{enabled: true, gt: 0}"  
            show-overflow
            @editActivated="(row) => updateFun(row,1)"   
            @edit-closed="(row) => updateFun(row,2)"    
            @cell-click="cellClick"
           >
            
            <vxe-column type="seq" width="60"> 
            </vxe-column>
            <vxe-column field="saveFlag" title="标识" width="60">
              <template  #default="{ row }">
                <div style="color: red;"> {{biaoshi(row.saveflag)}} </div>
              </template>
            </vxe-column>
            <vxe-column field='field'     title='字段名称'     width=400    :edit-render="{ name: 'input'}">
            </vxe-column>
             <vxe-column field='len'     title='字段长度'      width=400     :edit-render="{ name: 'input'}">
            </vxe-column>
            <vxe-column field='lb'   title='护理级别'      width=400   :edit-render=hljbConst>
            </vxe-column>

          </vxe-table> 
        </div>  
    </div>
</div>


</template>

<style lang="scss" scoped>
 
.main-content{
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #f7f7f7;

  .main-content-case{
    width: 100%;
    height: 100%;
    background:#fff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    .button-case{
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #333333;
        height: 40px;
        border-radius: 4px 4px 0px 0px;
        border: 1px solid #EBEBEB;
        padding-left: 12px;
        .button-case-box {
            display: flex;
            align-items: center;
            margin-right: 12px;
            cursor: pointer; /* 可选：使光标变为指针，表示可点击 */
        }
        
    }
    .table-case{
            width: 100%;
            height: calc(100% - 20px);
            background-color: aqua;
        }
  }


}
.xpFont{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
.xpFontSyzt{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>